<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title-bar">
      <text class="title">备忘录</text>
    </view>
    
    <!-- 全部笔记区域 -->
    <view class="notes-section">
      <text class="section-title">全部笔记</text>
      <text class="note-count">{{ notes.length }}条笔记</text>
    </view>
    
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-icon">
        <uni-icons type="search" size="24" color="#999"></uni-icons>
      </view>
      <input type="text" placeholder="搜索笔记" class="search-input" v-model="searchKeyword" @input="filterNotes" />
    </view>
    
    <!-- 笔记列表 -->
    <view class="notes-list">
      <view v-for="(note, index) in filteredNotes" :key="index" class="note-item">
        <view class="note-info">
          <text class="note-title">{{ note.title }}</text>
          <text class="note-time">{{ note.time }}</text>
        </view>
        <button class="delete-btn" @click="deleteNote(index)">
          <uni-icons type="trash" size="24" color="#ff4d4f"></uni-icons>
        </button>
      </view>
      
      <!-- 空状态提示 -->
      <view v-if="filteredNotes.length === 0" class="empty-state">
        <text>暂无笔记</text>
      </view>
    </view>
    
    <!-- 添加按钮 -->
    <button class="add-btn" @click="goto('add')">
      <uni-icons type="plus" size="30" color="#fff"></uni-icons>
    </button>
    
    <!-- 底部导航 -->
    <view class="tab-bar">
      <view class="tab-item active" @click="switchTab('notes')">
        <uni-icons type="book" size="24"></uni-icons>
        <text>笔记</text>
      </view>
      <view class="tab-item" @click="switchTab('todo')">
        <uni-icons type="checkbox" size="24"></uni-icons>
        <text>代办</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '备忘录',
      notes: [
        { title: '上课', time: '时间每周2' },
        { title: '周会', time: '每周5' },
        { title: '晨会', time: '每周一上午9:50' },
        { title: '周报', time: '每周5' },
        { title: '周计划', time: '每周日' }
      ],
      filteredNotes: [],
      searchKeyword: '',
      activeTab: 'notes'
    };
  },
  onLoad() {
    // 初始化过滤后的笔记列表
    this.filteredNotes = [...this.notes];
  },
  methods: {
    // 跳转到其他页面
    goto(page) {
      uni.navigateTo({
        url: '/pages/' + page + '/' + page
      });
    },
    
    // 删除笔记
    deleteNote(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这条笔记吗？',
        success: (res) => {
          if (res.confirm) {
            // 从原数组中删除
            this.notes.splice(this.notes.findIndex(note => 
              note.title === this.filteredNotes[index].title
            ), 1);
            // 从过滤后的数组中删除
            this.filteredNotes.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    },
    
    // 过滤笔记
    filterNotes() {
      if (!this.searchKeyword) {
        this.filteredNotes = [...this.notes];
        return;
      }
      
      this.filteredNotes = this.notes.filter(note => 
        note.title.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
        note.time.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    },
    
    // 切换底部导航
    switchTab(tab) {
      this.activeTab = tab;
      // 这里可以添加切换页面内容的逻辑
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.title-bar {
  padding: 30rpx 0;
  text-align: center;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.notes-section {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.note-count {
  font-size: 24rpx;
  color: #999;
}

.search-box {
  display: flex;
  align-items: center;
  margin: 20rpx 30rpx;
  padding: 0 20rpx;
  height: 70rpx;
  background-color: #f0f0f0;
  border-radius: 35rpx;
}

.search-icon {
  margin-right: 15rpx;
  color: #999;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  background-color: transparent;
}

.notes-list {
  flex: 1;
  padding-bottom: 120rpx;
}

.note-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  margin-bottom: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.note-info {
  flex: 1;
}

.note-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}

.note-time {
  font-size: 24rpx;
  color: #999;
}

.delete-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.add-btn {
  position: fixed;
  right: 40rpx;
  bottom: 130rpx;
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
  padding: 0;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #999;
}

.tab-item.active {
  color: #007aff;
}

.tab-item uni-icons {
  margin-bottom: 8rpx;
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}
</style>
